<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar fixed>
      <template #left>
        <!-- img标签显示图片 -->
        <!-- <img src="@/assets/logo.png" alt="" width="100px" height="30px"> -->
        <!-- 背景图 -->
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          icon="search"
          round
          type="info"
          @click="$router.push({ path: '/search' })"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- 横向滚动条 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :title="item.name" :key="item.id">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="别拉了,没得了!"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <!-- 使用插槽 -->
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image fit="cover" :src="img" lazy-load />
                  </van-grid-item>
                </van-grid>
                <!-- 底部额外信息区域 -->
                <div>
                  <span>{{ item.aut_name }}</span>
                  <span>{{ item.comm_count }}评论</span>
                  <span>{{ item.pubdate | fromNow }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannels, getArticles } from './home'
export default {
  name: 'home',
  data () {
    return {
      active: 0, // 点击频道标签的index
      channels: [], // 频道列表
      list: [], // 文章列表
      loading: false, // 加载状态
      finished: false, // 是否完成
      refreshing: false, // 下拉刷新
      timestamp: null // 默认不给值，发请求的时候获取当前时间戳就可以了
    }
  },
  async created () {
    // 获取频道列表
    let res = await getChannels()
    // console.log(res)
    this.channels = res.data.data.channels
  },
  methods: {
    // 上拉刷新
    async onLoad () {
      // 判断有无timestamp
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      // 根据频道id请求文章
      let res = await getArticles({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      })
      // console.log(res)
      // 存储服务器返回的时间戳用于请求下一页数据
      this.timestamp = res.data.data.pre_timestamp
      // 添加数据
      this.list.push(...res.data.data.results)
      // console.log(res)

      // 修改loading为false:本次加载结束
      this.loading = false

      // 如果超过100条数据，这个时候就不再触底
      if (this.list.length >= 50) {
        this.finished = true
      }
    },
    // 下拉刷新
    onRefresh () {
      // 一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false
      this.timestamp = null // 下拉刷新时间戳清空，从头开始加载
      // 先清空旧数据
      this.list = []
      // 设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true
      // 重新请求数据
      this.onLoad()
      // 关闭下拉刷新动画（如果不写，上面的下拉刷新动画会一直转圈）
      this.refreshing = false
    },
    tabClick () {
      this.list = []
      this.timestamp = null
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style lang="less">
/* 1.顶部栏 */
.van-nav-bar {
  z-index: 10 !important;
  /* 左边logo */
  .logo {
    width: 100px;
    height: 30px;
    /* 注意点 * 1.在背景图中使用@会默认给你前面添加一个 ./ ,导致路径错误
2.解决方案： 在@符号前面加一个~，去掉默认./ */
    background: url('~@/assets/logo.png') no-repeat;
    background-size: 100%;
  } /* 右边按钮 */
  .van-nav-bar__right {
    .van-button {
      width: 100px;
      height: 35px;
      background-color: #00affd;
      .van-icon {
        color: #fff;
      }
    }
  }
} /* 2.tablan布局 */
.van-tabs {
  /* 2.1 头部tab栏 */
  .van-tabs__wrap {
    width: 100%;
    position: fixed;
    top: 46px;
    z-index: 10;
  } /* 2.2 内容 */
  .van-tabs__content {
    /* 设置列表栏的上margin,避免被导航栏与tab栏遮挡(固定定位导致脱标) */
    margin-top: 90px; /* 设置列表栏的下margin,避免被底部栏脱标导致遮挡 */
    margin-bottom: 10px;
  }
}
</style>
